<template>
  <div style="width: 100%; height: 100%">
    <div>
      <!-- Icon图标 -->
      <i class="el-icon-edit"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <div>
      <!-- Button按钮 -->
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
    <div>
      <!-- link文字链接 -->
      <el-link href="https://element.eleme.io" target="_blank"
        >默认链接</el-link
      >
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>
    <div>
      <!-- Radio 单选框 -->
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </div>
    <div>
      <!-- Checkbox 多选框 -->
      <!-- `checked` 为 true 或 false -->
      <el-checkbox v-model="checked">备选项</el-checkbox>
    </div>
    <div>
      <!-- Input 输入框 -->
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <div>
      <!-- InputNumber 计数器 -->
      <el-input-number
        v-model="num"
        @change="handleChange"
        :min="1"
        :max="10"
        label="描述文字"
      ></el-input-number>
    </div>
    <div>
      <!-- Select 选择器 -->
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <!-- Cascader 级联选择器 -->
      <el-cascader-panel :options="options"></el-cascader-panel>
    </div>
    <div>
      <!-- Switch 开关 -->
      <el-switch
        v-model="value1"
        active-text="按月付费"
        inactive-text="按年付费"
      >
      </el-switch>
      <el-switch
        style="display: block"
        v-model="value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="按月付费"
        inactive-text="按年付费"
      >
      </el-switch>
    </div>
    <div>
      <!-- Slider 滑块 -->
      <div class="block">
        <span class="demonstration">不显示间断点</span>
        <el-slider v-model="value3" :step="10"> </el-slider>
      </div>
      <div class="block">
        <span class="demonstration">显示间断点</span>
        <el-slider v-model="value4" :step="10" show-stops> </el-slider>
      </div>
    </div>
    <div>
      <!-- TimePicker 时间选择器 -->
      <el-time-select
        v-model="value5"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30',
        }"
        placeholder="选择时间"
      >
      </el-time-select>
    </div>
    <div>
      <!-- DatePicker 日期选择器 -->
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value6" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value7"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
          v-model="value8"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration"
          >起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span
        >
        <el-date-picker
          v-model="value9"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        >
        </el-date-picker>
      </div>
    </div>
    <div>
      <!-- Rate 评分 -->
      <div class="block">
        <span class="demonstration">默认不区分颜色</span>
        <el-rate v-model="value10"></el-rate>
      </div>
      <div class="block">
        <span class="demonstration">区分颜色</span>
        <el-rate v-model="value11" :colors="colors"> </el-rate>
      </div>
    </div>
    <div>
      <!-- ColorPicker 颜色选择器 -->
      <div class="block1">
        <span class="demonstration">有默认值</span>
        <el-color-picker v-model="color10"></el-color-picker>
      </div>
    </div>
    <div>
      <!-- Transfer 穿梭框 -->
      <el-transfer
        v-model="value"
        :props="{
          key: 'value12',
          label: 'desc',
        }"
        :data="data"
      >
      </el-transfer>
    </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="70"
      ></el-progress>
      <el-progress
        :text-inside="true"
        :stroke-width="24"
        :percentage="100"
        status="success"
      ></el-progress>
      <el-progress
        :text-inside="true"
        :stroke-width="22"
        :percentage="80"
        status="warning"
      ></el-progress>
      <el-progress
        :text-inside="true"
        :stroke-width="20"
        :percentage="50"
        status="exception"
      ></el-progress>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
      </div>
      <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-badge :value="12" class="item">
        <el-button size="small">评论</el-button>
      </el-badge>
      <el-badge :value="3" class="item">
        <el-button size="small">回复</el-button>
      </el-badge>
      <el-badge :value="1" class="item" type="primary">
        <el-button size="small">评论</el-button>
      </el-badge>
      <el-badge :value="2" class="item" type="warning">
        <el-button size="small">回复</el-button>
      </el-badge>

      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix">
            评论
            <el-badge class="mark" :value="12" />
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            回复
            <el-badge class="mark" :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div>
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="sub-title">circle</div>
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
            </div>
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar :size="size" :src="circleUrl"></el-avatar>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="sub-title">square</div>
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
            </div>
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar
                shape="square"
                :size="size"
                :src="squareUrl"
              ></el-avatar>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-alert title="成功提示的文案" type="success"> </el-alert>
      <el-alert title="消息提示的文案" type="info"> </el-alert>
      <el-alert title="警告提示的文案" type="warning"> </el-alert>
      <el-alert title="错误提示的文案" type="error"> </el-alert>
    </div>
    <div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button :plain="true" @click="open">打开消息提示</el-button>
      <el-button :plain="true" @click="openVn">VNode</el-button>
    </div>
    <div>
      <el-button type="text" @click="open">点击打开 Message Box</el-button>
    </div>
    <div>
      <el-button plain @click="open1"> 可自动关闭 </el-button>
      <el-button plain @click="open2"> 不会自动关闭 </el-button>
    </div>
    <div>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    </div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div>
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </div>
    <div>
      <el-button type="text" @click="dialogVisible = true"
        >点击打开 Dialog</el-button
      >

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div>
      <el-popover placement="top" width="160" v-model="visible">
        <p>这是一段内容这是一段内容确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false"
            >取消</el-button
          >
          <el-button type="primary" size="mini" @click="visible = false"
            >确定</el-button
          >
        </div>
        <el-button slot="reference">删除</el-button>
      </el-popover>
    </div>
    <div>
      <el-tooltip placement="top">
        <div slot="content">多行信息<br />第二行信息</div>
        <el-button>Top center</el-button>
      </el-tooltip>
    </div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >操作按钮</el-button
          >
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">默认 Hover 指示器触发</span>
        <el-carousel height="150px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="block">
        <span class="demonstration">Click 指示器触发</span>
        <el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div>
      <el-collapse v-model="activeName1" accordion>
        <el-collapse-item title="一致性 Consistency" name="1">
          <div>
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
          <div>
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
        </el-collapse-item>
        <el-collapse-item title="反馈 Feedback" name="2">
          <div>
            控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
          </div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </el-collapse-item>
        <el-collapse-item title="效率 Efficiency" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>
            清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
          </div>
          <div>
            帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
          </div>
        </el-collapse-item>
        <el-collapse-item title="可控 Controllability" name="4">
          <div>
            用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
          </div>
          <div>
            结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div>
      <div class="block">
        <div class="radio">
          排序：
          <el-radio-group v-model="reverse">
            <el-radio :label="true">倒序</el-radio>
            <el-radio :label="false">正序</el-radio>
          </el-radio-group>
        </div>

        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div>
      <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
      <el-divider></el-divider>
      <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
    </div>
    <div>
      <el-calendar v-model="value13"> </el-calendar>
    </div>
    <div class="demo-image">
      <div class="block" v-for="fit in fits" :key="fit">
        <span class="demonstration">{{ fit }}</span>
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          :fit="fit"
        ></el-image>
      </div>
    </div>
    <div>
      Scroll down to see the bottom-right button.
      <el-backtop
        target=".page-component__scroll .el-scrollbar__wrap"
      ></el-backtop>
    </div>
    <div>
      <el-radio-group v-model="direction">
        <el-radio label="ltr">从左往右开</el-radio>
        <el-radio label="rtl">从右往左开</el-radio>
        <el-radio label="ttb">从上往下开</el-radio>
        <el-radio label="btt">从下往上开</el-radio>
      </el-radio-group>

      <el-button
        @click="drawer = true"
        type="primary"
        style="margin-left: 16px"
      >
        点我打开
      </el-button>

      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
      >
        <span>我来啦!</span>
      </el-drawer>
    </div>
  </div>
</template>


<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    //HelloWorld
  },
  data() {
    const generateData = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      formInline: {
        user: "",
        region: "",
      },
      data: generateData(),
      value12: [],
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
      active: 0,
      isCollapse: true,
      dialogVisible: false,
      activeName: "first",
      color10: "#409EFF",
      value10: null,
      drawer: false,
      direction: "rtl",
      activeName1: "1",
      value11: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      value8: "",
      value9: "",
      value5: "",
      value1: true,
      value13: new Date(),
      value2: true,
      value3: 0,
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      value4: 0,
      radio: "1",
      checked: true,
      input: "",
      num: 1,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value6: "",
      value7: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleChange(value) {
      console.log(value);
    },
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    goBack() {
      console.log("go back");
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    open2() {
      const h = this.$createElement;

      this.$notify({
        title: "标题名称",
        message: h(
          "i",
          { style: "color: teal" },
          "这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案"
        ),
      });
    },

    open3() {
      this.$notify({
        title: "提示",
        message: "这是一条不会自动关闭的消息",
        duration: 0,
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    open() {
      this.$message("这是一条消息提示");
    },
    open1() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },

    openVn() {
      const h = this.$createElement;
      this.$message({
        message: h("p", null, [
          h("span", null, "内容可以是 "),
          h("i", { style: "color: teal" }, "VNode"),
        ]),
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */
.bgimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background: url(../assets/loginBackground.png) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  display: flex;
  overflow: none;
}
.box1 {
  width: 33%;
  height: 100%;
}
.box2 {
  width: 397px;
  height: 100%;
}
.box3 {
  width: 37%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.touminBox1 {
  margin-top: 198px;
  margin-left: 83px;
  width: 115px;
  height: 158px;
  background: #e1f2f9;
  opacity: 0.3;
}
.touminBox2 {
  margin-bottom: 235px;
  margin-left: 154px;
  width: 132px;
  height: 161px;
  background: #e1f2f9;
  opacity: 0.3;
}
.text1 {
  position: absolute;
  margin-top: 208px;
  margin-left: 130px;
  width: 22px;
  line-height: 18px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #fefefe;
  writing-mode: lr-tb;
}
.text2 {
  position: absolute;
  margin-top: 208px;
  margin-left: 168px;
  width: 20px;
  line-height: 14px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #ffffff;
  writing-mode: tb-rl;
}
.text3 {
  position: absolute;
  margin-top: 255px;
  margin-left: 220px;
  width: 34px;
  line-height: 28px;
  font-size: 27px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #6bb9da;
  writing-mode: lr-tb;
}
.text4 {
  margin-top: 575px;
  width: 397px;
  height: 200px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #565656;
  white-space: nowrap;
}
.loginBox {
  position: relative;
  width: 351px;
  height: 351px;
  background: #efeff0;
  border-radius: 20px;
  opacity: 0.9;
}
.text5 {
  margin-top: 22px;
  margin-left: 31px;
  width: 51px;
  height: 16px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #96a3b0;
  white-space: nowrap;
}
.text6 {
  margin-top: 6px;
  margin-left: 31px;
  width: 325px;
  height: 53px;
  font-size: 26px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #4e4e4e;
}
.formText {
  margin-left: 29px;
  width: 37px;
  height: 16px;
  font-size: 13px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #737474;
}
.input {
  padding-left: 22px;
  margin-top: 20px;
  width: 251px;
  height: 37px;
  border-radius: 5px;
  opacity: 1;
  background: #fff;
  border: 1px solid #dfefff;
}
.user {
  width: 12px;
  height: 14px;
  position: absolute;
  left: 25%;
  bottom: 59%;
  background-image: url(../assets/userName.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.psd {
  width: 12px;
  height: 14px;
  position: absolute;
  left: 25%;
  bottom: 42%;
  background-image: url(../assets/password.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.submit {
  color: #f4f4f5;
  font-size: 16px;
  margin-top: 52px;
  margin-left: 30px;
  width: 295px;
  height: 37px;
  background: #409eff;
  border-radius: 19px;
  opacity: 1;
  border: #409eff;
}
.text7 {
  top: 88%;
  left: 82%;
  position: absolute;
  width: 196px;
  height: 45px;
  font-size: 35px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #d7e8fa;
  opacity: 0.3;
}
.text8 {
  top: 92%;
  left: 82%;
  position: absolute;
  width: 110px;
  height: 24px;
  font-size: 20px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #409eff;
  white-space: nowrap;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
